<template>
  <h2>本地的 todo list 代办清单</h2>
  <el-button @click="createFn">创建</el-button>
  <!-- 表格区域 -->
  <el-table :data="todoList" style="width: 100%" type="index">
      <el-table-column prop="container" label="内容" width="180"></el-table-column>
      <el-table-column prop="date" label="时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
          <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
      </el-table-column>
  </el-table>
  <!-- 弹出层 -->
  <el-dialog v-model="dialogVisible" title="添加代办" @close="close">
      <el-form ref="formRef" v-model="form">
          <el-form-item label="内容">
              <el-input v-model="form.container" />
          </el-form-item>
          <el-form-item label="时间">
              <el-date-picker v-model="form.date" type="date" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="confirmFn">
                  确定
              </el-button>
          </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
export default {
  // components: { AddList },
  data () {
      return {
          // 控制弹窗状态显示
          dialogVisible: false,
          // 表单数据
          form: {
              container: '',
              date: ''
          },
          // 表格数据
          todoList: JSON.parse(window.localStorage.getItem('todoList')) || []
      }
  },
  methods: {
      // 时间转化
      formatDate (val, format = 'YYYY-MM-DD') {
          return val ? dayjs(val).format(format) : ''
      },
      // 展示弹出框
      createFn () {
          // 清空数据
          this.form = {
              container: undefined, date: undefined
          }
          this.dialogVisible = true
      },
      // 弹出层提交事件--
      confirmFn () {
          // console.log(this.form)
          // 时间格式化
          this.form.date = this.formatDate(this.form.date)
          if (this.form.id) {
              // 编辑操作
              this.todoList.splice(this.form.id, 1, { container: this.form.container, date: this.form.date })

          } else if (this.form.id === 0) {
              this.todoList.splice(this.form.id, { container: this.form.container, date: this.form.date })
          }else {
              // 添加操作
              this.todoList.push({ container: this.form.container, date: this.form.date })
          }
          // 数据本地化
          window.localStorage.setItem('todoList', JSON.stringify(this.todoList))
          this.dialogVisible = false
      },
      // 删除操作
      handleDelete (index) {
          this.todoList.splice(index, 1)
          window.localStorage.setItem('todoList', JSON.stringify(this.todoList))
      },
      // 编辑操作
      handleEdit (index, data) {
          // 数据回显
          this.form = data
          this.form.id = index
          this.dialogVisible = true
      },
      // 取消弹出层操作
      close () {
          this.dialogVisible = false
      },
  }
}
</script>

<style scoped></style>